<template>
	<div class="boxes-detail-container">
		<div class="boxes-detail-header" :style="{ borderBottomColor: headerBottomBorderColor }">
			<global-svg-icon class="back-btn" icon-name="return" width="18px" height="18px" @click="router.push('/config-manage/boxes/table')" />
			<p class="font-20-bold box-title">{{ cBoxTitle }}</p>

			<div class="boxes-detail-header-tabs">
				<div
					:key="tab.key"
					v-for="tab in staticTabs"
					class="header-tabs-item"
					:style="cHeaderTabsItem(tab.key)"
					@click="changeTabPage(tab.key)"
				>
					{{ tab.label }}
				</div>
			</div>
		</div>

		<div class="boxes-detail-body">
			<vue-scroll @handle-scroll="handlePageScroll">
				<slot :id="props.id"></slot>
			</vue-scroll>
		</div>
	</div>
</template>

<script setup lang="ts" name="BoxInfoContainer">
interface TsRouterParamObj {
	'config-manage-boxes-detail-basic-info': string;
	'config-manage-boxes-detail-netwrok': string;
	'config-manage-boxes-detail-AIConfiguration': string;
	'config-manage-boxes-detail-performance': string;
}

type TsPros = {
	id: string;
	boxSerial: string;
	name: string;
};
const props = withDefaults(defineProps<TsPros>(), {
	id: '',
	boxSerial: '',
	name: ''
});

const router = useRouter();
const route = useRoute();

const cBoxTitle = computed(() => {
	const statusStr = (route.query.status as string) === '0' ? '离线' : '在线';
	const name = route.query.name ?? '盒子名称';
	return `${name} (${statusStr})`;
});

const staticTabs = [
	{ label: '基本信息', key: 'config-manage-boxes-detail-basic-info' },
	{ label: '网络配置', key: 'config-manage-boxes-detail-netwrok' },
	{ label: 'AI配置', key: 'config-manage-boxes-detail-AIConfiguration' },
	{ label: '性能监控', key: 'config-manage-boxes-detail-performance' }
];
const cHeaderTabsItem = computed(() => {
	return function (params: string) {
		const routeName = route.name as string;
		return {
			color: params === routeName ? '#f0f6fc' : '#b0b5c0',
			backgroundColor: params === routeName ? 'rgba(240, 246, 252, 0.1)' : 'transparent'
		};
	};
});
const changeTabPage = (key: string): void => {
	const routerParamObj = {
		'config-manage-boxes-detail-basic-info': '/basic-info',
		'config-manage-boxes-detail-netwrok': '/netwrok',
		'config-manage-boxes-detail-AIConfiguration': '/AIConfiguration',
		'config-manage-boxes-detail-performance': '/performance'
	};
	router.push(
		`/config-manage/boxes/detail${routerParamObj[key as keyof TsRouterParamObj]}?id=${props.id}&boxSerial=${props.boxSerial}&name=${
			props.name
		}`
	);
};

const headerBottomBorderColor = ref('transparent');
const handlePageScroll = (vertical: Record<string, any>): void => {
	headerBottomBorderColor.value = vertical.scrollTop > 10 ? '#20305b' : 'transparent';
};
</script>

<style lang="less" scoped>
.boxes-detail-container {
	width: calc(100% - 16px - 16px);
	height: calc(100vh - var(--layout-header) - 23px - 23px) !important;
	margin: 23px 16px;
	border: 1px solid @borderColor01;
	border-radius: 8px;
	background: rgba(8, 22, 59, 0.4);

	.boxes-detail-header {
		display: flex;
		height: 76px;
		border-bottom: 1px solid;
		padding: 20px 32px;
		align-items: center;

		.back-btn {
			margin-right: 10px;
			font-size: 19px;
			color: @text02;

			&:hover {
				opacity: 0.85;
				cursor: pointer;
			}
		}

		.box-title {
			margin-right: 40px;
			color: @text01;
		}

		.boxes-detail-header-tabs {
			display: grid;
			grid-column-gap: 10px;
			grid-template-columns: repeat(4, 1fr);

			.header-tabs-item {
				height: 30px;
				border-radius: 6px;
				padding: 4px 12px;
				font-size: 14px;
				font-weight: 700;
				line-height: 22px;
				text-align: center;

				&:hover {
					background-color: rgba(240, 246, 252, 0.07) !important;
					cursor: pointer;
				}
			}
		}
	}

	.boxes-detail-body {
		// 多减去的20px是外层容器的paddingBottm, 为了避免超出的内容区下部分紧挨着外层容器的下边沿
		height: calc(100vh - var(--layout-header) - 23px - 23px - 76px - 20px);
	}

	.test {
		height: 3300px;
		// background-color: red;
	}
}
</style>
